<template>
  <div class="app-container calendar-list-container">
    <el-collapse>
      <el-collapse-item v-for="item in apps" :key="item.name">
        <template slot="title">
          <span style="font-size: 16px;display: inline-block;width: 300px;color: #999999">服务名称:&nbsp;&nbsp;<span style="font-style: italic;color: #3b91b6">{{item.name}}</span></span>
          <span style="font-size: 16px;display: inline-block;width: 300px;color: #999999">服务个数:&nbsp;&nbsp;<span style="font-style: italic;color: #3b91b6">{{item.instanceInfos.length}}</span></span>
        </template>
          <el-table
          :data="item.instanceInfos"
          border
          style="width: 100%">
          <el-table-column
          prop="status"
          label="服务状态">
          </el-table-column>

          <el-table-column
          prop="instances[0].id"
          label="服务id">
            <template slot-scope="scope">
              {{scope.row.instances[0].id}}
              <el-button type="primary" icon="document" size="mini" v-clipboard:copy='scope.row.instances[0].id' v-clipboard:success='clipboardSuccess'>copy</el-button>
            </template>
          </el-table-column>
          </el-table>

      </el-collapse-item>
    </el-collapse>
  </div>
</template>


<script>
  import { getSimpleServiceInfo } from '@/api/ops/service'
  import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
  export default {
    directives: {
      clipboard
    },
    data() {
      return {
        'apps': []
      }
    },
    methods: {
      clipboardSuccess() {
        this.$message({
          message: '复制成功',
          type: 'success',
          duration: 1500
        })
      }
    },
    mounted() {
      // 计算iframe的高度
      const iframeHeight = window.innerHeight - 88
      this.iframe = iframeHeight + 'px'
      getSimpleServiceInfo().then(response => {
        this.apps = response.data.data.apps
      })
    }
  }
</script>

<style scoped>

</style>
